<template>
    <div id="login">
        <div class="login-box">
            <!-- <div class="logo"></div> -->
            <div class="title">后台管理系统</div>
            <div class="user">
                <span class="head"><i class="svg-user"></i></span>
                <input type="text" class="user_box" v-model="name" @focus="userFocus" @blur="userBlur">
                <div class="close" @click="name = ''">&times;</div>
            </div>
            <div class="line_bottom">
                <div class="line_hua" :style="{width:useranimation?'100%':'0px'}"></div>
            </div>
            <div class="pass">
                <span class="head"><i class="svg-pass"></i></span>
                <input  @keyup.enter='isgetLogin()' type="password" class="pass_box" v-model="pass" @focus="passFocus" @blur="passBlur">
            </div>
            <div class="line_bottom mb"> 
                <div class="line_hua" :style="{width:passanimation?'100%':'0px'}"></div>
            </div>
            <div class="login_btn" @click="isgetLogin">登录</div>
        </div>
    </div>
</template>

<script>
import {login} from '@/api';
export default {
    data(){
        return {
            name:'',
            pass:'',
            useranimation:false,
            passanimation:false,
        }
    },
    created(){
        this.Cookie.remove('ISLOGINZS','/');//进入页面删除cookie
    },
    methods:{
        isgetLogin(){
            var that = this;
            var params = {
                mobile:this.name,
                password:this.pass
            };
            login(params).then(res=>{
                if(res.code == 0){
                   that.$message({
                    message: '登录成功！',
                    type: 'success'
                });
                that.Cookie.set('accessToken',res.data.userInfo.token);
                that.$router.push({ path: "/memberlist" });
                }
            });
        },
        userFocus(){
            this.useranimation = true;
        },
        userBlur(){
            this.useranimation = false;
        },
        passFocus(){
            this.passanimation = true;
        },
        passBlur(){
            this.passanimation = false;
        }
    }
}
</script>

<style scoped>
#login{
    position: fixed;
    width: 100%;
    height: 100%;
    background: url(../../assets/login_bg.png) no-repeat; 
    background-size: cover;
}
#login .login-box{
    width: 420px;
    height: 530px;
    box-sizing: border-box;
    padding: 55px 50px 0 50px;
    position: absolute;
    top: 50%;right:224px;
    transform: translateY(-50%);
    background-color:#fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    border-radius: 5px;
}
#login .logo{
    height: 70px;
    /* background: url('../../assets/login_logo.png') no-repeat 100% 100%; */
    background-size:100% 100%;
}
#login .title{
    height: 50px;
    line-height: 50px;
    font-size: 22px;
    text-align: center;
    color: #333333;
    margin-bottom:33px;
}
#login .user{
    height: 48px;
    display: flex;
}
#login .user .head{
    line-height: 48px;
}
#login .user .svg-user{
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: #000;
    -webkit-mask: url('../../assets/user.svg') no-repeat 100% 100%;
    mask: url('../../assets/user.svg') no-repeat 100% 100%;
    vertical-align: middle;
}
#login .user .user_box{
    flex: 1;
    height: 48px;
    text-indent:10px;
}
#login .user .close{
    font-size:22px;
    line-height: 48px;
    cursor: pointer;
}
#login .line_bottom{
    height: 2px;
    background: #E1E1E1;
    margin-bottom:14px;
    position: relative;
}
#login .mb{
    margin-bottom:60px;
}
#login .line_bottom .line_hua{
    height: 2px;
    width: 100%;
    background: #455FE7;
    position: absolute;
    top: 0;left: 0%;
    z-index: 100;
    transition: all 0.5s;
}
#login .pass{
    height: 48px;
    display: flex;
}
#login .pass .head{
    line-height: 48px;
}
#login .pass .svg-pass{
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: #000;
    -webkit-mask: url('../../assets/pass.svg') no-repeat 100% 100%;
    mask: url('../../assets/pass.svg') no-repeat 100% 100%;
    vertical-align: middle;
}
#login .pass .pass_box{
    flex: 1;
    height: 48px;
    text-indent:10px;
}
#login .login_btn{
    height: 58px;
    box-sizing: border-box;
    -webkit-box-shadow:0 4px 10px rgba(0, 0, 0, 0.1);
    box-shadow:0 4px 10px rgba(0, 0, 0, 0.1);
    border:4px solid #fff;
    border-radius: 29px;
    background: #455FE7;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-size: 24px;
    cursor: pointer;
}
</style>